<template>
	<div class="base-info padding-lr">
	  <van-form>
	    <!-- 通过 pattern 进行正则校验 -->
	    <van-field
	      required
	      v-model="form.title"
	      label="活动名称"
	      placeholder="请填写活动名称"
	      input-align="right"
	    />
	    <div class="field-box">
	      <div class="label">活动封面 <span class="tip fs-12 color-s">建议上传比例为4:3的图片</span></div>
	      <!-- <van-uploader v-model="form.cover" max-count="1" :before-read="beforeRead" :after-read="afterRead" :max-size="1000 * 1024" @oversize="onOversize"/> -->
	      <div class="my-img">
	        <!-- <img :src="form.cover" alt=""> -->
	        <van-image :src="form.cover" fit="scale-down"/>
	        <span class="change-pic" @click="changePic">更换图片</span>
	        <input
	          type="file"
	          class="file-input d-none"
	          ref="fileInput"
	          @change="handleFileChange"
	        >
	      </div>
	    </div>
		
		<van-cell title="活动开始时间" is-link :value="form.start_time" @click="showStartTimePopup = true" required label-width="90"/>
	    <van-cell title="活动截止时间" is-link :value="form.end_time" @click="showEndTimePopup = true" required label-width="90"/>
	  </van-form>
	</div>
	<div class="base-info padding-lr margT-l">
	  <van-form>
	    <van-field
	      required
	      v-model="form.sharetitle"
	      label="分享标题"
	      placeholder="请填写分享活动时候所显示的标题"
	      input-align="right"
	    />
	    <div class="field-box">
	      <div class="label">分享缩略图 <span class="tip fs-12 color-s">建议上传比例为4:3的图片</span></div>
	      <div class="my-img">
	        <van-image :src="form.shareimg" fit="scale-down"/>
	        <span class="change-pic" @click="changePic4shareimg">更换图片</span>
	        <input
	          type="file"
	          class="file-input d-none"
	          ref="fileInput4shareimg"
	          @change="handleFileChange4shareimg"
	        >
	      </div>
	    </div>
	    <van-field
	      required
	      v-model="form.share_describe"
	      label="分享描述"
	      type="textarea"
	      autosize
	      rows="5"
	      placeholder="请填写活动在微信中分享后的文案"
	      input-align="right"
	    />
	  </van-form>
	</div>
	<div class="introduce padding-all-l margT-l">
	  <h2 class="introduce-title t-bold">活动介绍</h2>
	  <div v-for="(item,index) in form.introduce" :key="Number(item.id)">
	    <my-text v-if="item.type === 'text'" class="margT-l" :editorHtml="item.value" :id="Number(item.id)" :index="index"
	      @editorHtmlChange="editorHtmlChange"
	      @deleteIntroduceItem="deleteIntroduceItem"
	      @downIntroduceItem="downIntroduceItem"
	      @upIntroduceItem="upIntroduceItem">
	    </my-text>
	    <my-img v-if="item.type === 'img' && item.value" class="margT-l" :value="item.value" :id="Number(item.id)" :index="index"
	      @ChangeFile="ChangeFile"
	      @deleteIntroduceItem="deleteIntroduceItem"
	      @downIntroduceItem="downIntroduceItem"
	      @upIntroduceItem="upIntroduceItem">
	    </my-img>
	  </div>
	  <div class="btnAddSomeBox margT-l">
	    <div class="addSome">
	      <van-button size="small" type="default" block @click="addTextBtn">添加文本{{textNum}}/10</van-button>
	    </div>
	    <div class="interval"></div>
	    <div class="addSome">
	      <van-button size="small" type="default" block @click="addPicBtn">添加图片{{imgNum}}/10</van-button>
	      <input
	          type="file"
	          class="file-input d-none"
	          ref="addPicInput"
	          @change="addPicInputChange"
	        >
	    </div>
	  </div>
	  <van-popup v-model:show="showStartTimePopup" position="bottom">
	    <van-datetime-picker
	      v-model="start_time"
	      type="datetime"
	      title="选择完整时间"
	      :min-date="minDate"
	      :max-date="maxDate"
	      @confirm="startTimeConfirm"
	    />
	  </van-popup>
	  <van-popup v-model:show="showEndTimePopup" position="bottom">
	    <van-datetime-picker
	      v-model="end_time"
	      type="datetime"
	      title="选择完整时间"
	      :min-date="minDate"
	      :max-date="maxDate"
	      @confirm="endTimeConfirm"
	    />
	  </van-popup>
	</div>
</template>

<script>
	
	import MyText from '@/components/MyText';
	import MyImg from '@/components/MyImg';
	export default {
	  name: "CommonForm",
	  components: {
		  MyText,
		  MyImg
	  },
	  props: {
	    form: Array
	  },
	  data() {
	    return {
	      showStartTimePopup:false,
	      showEndTimePopup: false,
	      start_time:new Date(),
	      end_time: new Date(),
	      minDate: new Date(2020, 0, 1),
	      maxDate: new Date(2028, 10, 1),
	    }
	  },
	  created () {
	    const _this = this;
	    //const caseList = _this.$store.getters.getCaseTabsList;
	    
	  },
	  methods: {
	    addTextBtn() {
	      let introduce = this.form.introduce || []
	      introduce.push({
	        id: (Number(introduce[introduce.length-1] && introduce[introduce.length-1].id)+1) || 1,
	        type:"text",
	        value:""
	      })
	      this.form.introduce = introduce
	      this.getTypeNum(this.form.introduce)
	    },
	    // 统计富文本框和图片的个数
	    getTypeNum(arr) {
	      this.textNum = 0
	      this.imgNum = 0
	      for(let i = 0; i < arr.length; i++) {
	        if(arr[i].type === 'text' && arr[i].value) {
	          this.textNum++
	        }else if(arr[i].type === 'img' && arr[i].value) {
	          this.imgNum++
	        }
	      }
	    },
	    // 上移
	    upIntroduceItem(index) {
	      console.log("upIntroduceItem", this.index)
	      let introduce = this.form.introduce
	      console.log("introduce[index - 1]", introduce[index - 1])
	      if(introduce[index - 1]){
	        const type = introduce[index-1].type
	        const value = introduce[index-1].value
	        introduce[index-1].type = introduce[index].type;
	        introduce[index-1].value = introduce[index].value;
	        introduce[index].type = type;
	        introduce[index].value = value;
	        this.form.introduce = introduce;
	      }else{
	        Toast("已在最后面")
	      }
	    },
	    // 下移
	    downIntroduceItem(index) {
	      console.log("downIntroduceItem", this.index)
	      let introduce = this.form.introduce
	      console.log("introduce[index + 1]", introduce[index + 1])
	      if(introduce[index + 1]){
	        const type = introduce[index+1].type
	        const value = introduce[index+1].value
	        introduce[index+1].type = introduce[index].type;
	        introduce[index+1].value = introduce[index].value;
	        introduce[index].type = type;
	        introduce[index].value = value;
	        this.form.introduce = introduce;
	      }else{
	        Toast("已在最前面")
	      }
	    },
	    deleteIntroduceItem(id) {
	      let introduce = this.form.introduce
	      if(introduce.length<=1) {
	        Toast('活动介绍不能为空')
	        return
	      }
	      this.form.introduce = introduce.filter(item => {
	        return item.id != id
	      })
	      this.getTypeNum(this.form.introduce)
	      // introduce.splice(index,1)
	      // this.form.introduce = introduce
	    },
	    onEditorChange(value) {
	      console.log(value);
	    },
	    ChangeFile(item) {
	      let introduce = this.form.introduce
	      let newIntroduce = introduce.map((i) => {
	        if(i.id == item.id) {
	          i.value = item.value
	        }
	         return i
	      })
	      this.form.introduce = newIntroduce
	    },
	    editorHtmlChange(item) {
	      let introduce = this.form.introduce
	      let newIntroduce = introduce.map((i) => {
	        if(i.id == item.id) {
	          i.value = item.value
	        }
	        return i
	      })
	      this.form.introduce = newIntroduce
	    },
	    startTimeConfirm(value) {
	      this.showStartTimePopup = false;
	      this.form.start_time = utils.formatDateYMDHM(value);
	    },
	    endTimeConfirm(value) {
	      this.showEndTimePopup = false;
	      this.form.end_time = utils.formatDateYMDHM(value);
	    },
	    onOversize(file) {
	      console.log('file', file);
	      console.log('文件大小不能超过 1M');
	    },
	    afterRead(value) {
	      console.log("file.value", value);
	      // this.form.cover = value.content
	    },
	    beforeRead(file) {
	      if (file.type != 'image/jpeg' && file.type != 'image/png') {
	        Toast('请上传jpg或png格式的图片');
	        return false;
	      }
	      return true;
	    },
		changeSwitch(value) {
		  console.log("value", value)
		  this.switchChecked = value
		},
		handleGetData () {
		  // 使用getData函数获取数据
		  this.$refs.kfb.getData().then(values => {
		    console.log('验证通过', values)
		  }).catch(() => {
		    console.log('验证未通过，获取失败')
		  })
		},
		changePic() {
		  this.$refs.fileInput.click()
		},
		changePic4shareimg() {
		  this.$refs.fileInput4shareimg.click()
		},
		addPicBtn() {
		  this.$refs.addPicInput.click()
		},
		addPicInputChange(e) {
		  const _this = this;
		  const img = e.target.files[0];
		  if (img.type != 'image/jpeg' && img.type != 'image/png') {
		    Toast('请上传jpg或png格式的图片');
		    return false;
		  }
		  if(img.size > 1000 * 1024) {
		    Toast("图片大小请不要超过1M")
		    return
		  }
		  utils.blobToDataURL(img, (base64Url) => {
		    let formData = new FormData()
		    formData.append('file', img)
		    console.log("formData", formData)
		    this.$request.uploadPic(formData).then(res=>{
		      console.log("res", res)
		      let introduce = this.form.introduce
		      introduce.push({
		        id: (Number(introduce[introduce.length-1] && introduce[introduce.length-1].id)+1) || 1,
		        type:"img",
		        value: res.data.url
		      })
		      this.form.introduce = introduce
		      this.getTypeNum(this.form.introduce)
		    })
		  });
		  // utils.blobToDataURL(img, (base64Url) => {
		  //   let introduce = this.form.introduce
		  //   introduce.push({
		  //     id: (Number(introduce[introduce.length-1] && introduce[introduce.length-1].id)+1) || 1,
		  //     type:"img",
		  //     value: base64Url
		  //   })
		  //   this.form.introduce = introduce
		  //   this.getTypeNum(this.form.introduce)
		  // });
		},
		handleFileChange4shareimg(e) {
		  const _this = this;
		  const img = e.target.files[0];
		  if (img.type != 'image/jpeg' && img.type != 'image/png' && img.type != 'image/gif') {
		    Toast('请上传jpg或png格式的图片');
		    return false;
		  }
		  if(img.size > 3000 * 1024) {
		    Toast("图片大小请不要超过3M")
		    return
		  }
		  utils.blobToDataURL(img, (base64Url) => {
		    let formData = new FormData()
		    formData.append('file', img)
		    console.log("formData", formData)
		    _this.$request.uploadPic(formData).then(res=>{
		      console.log("res", res)
		      _this.form.shareimg = res.data.url
		      console.log("_this.form.shareimg",_this.form.shareimg)
		    })
		  });
		},
		handleFileChange(e) {
		  const _this = this;
		  const img = e.target.files[0];
		  if (img.type != 'image/jpeg' && img.type != 'image/png' && img.type != 'image/gif') {
		    Toast('请上传jpg或png格式的图片');
		    return false;
		  }
		  if(img.size > 3000 * 1024) {
		    Toast("图片大小请不要超过3M")
		    return
		  }
		  utils.blobToDataURL(img, (base64Url) => {
		    _this.form.cover = base64Url
		    console.log("_this.form.cover",_this.form.cover)
		  });
		},
	  }
	};
</script>

<style>
</style>
